<div class="wrapper-md" ng-controller="illustrationController">
    <div class="panel">
        <div class="wrapper-lg">
            <h2 class="m-t-none"><a href="">Spiker 使用实例</a></h2>
            <div class="line line-lg b-b b-light"></div>
            <div>
                <p>这里提供了如何在开发中使用Spiker代理IP的实例供爬虫工程师们参考。</p>
                <p>现在主流网站的内容渲染方式可分为后端渲染和前端渲染，针对这两类渲染方式，我们抓取方法也有不同。</p>
                <ol>
                    <li>
                        <p>后端渲染</p>
                        <p>由后端渲染，我们可以直接请求目标地址获取后端返回内容，最后清洗出目标数据。</p>
                    </li>
                    <li>
                        <p>前端渲染</p>
                        <p>前端渲染则要细化出两类，如果能找到前端获取数据的接口，且能根据相应规则接通，则直接根据规则请求后端接口，获取并清洗出目标数据。</p>
                        <p>否则，就通过无头浏览器抓取，即在前端资源加载、JS执行完成后再获取页面内容，最后清洗出目标数据。</p>
                    </li>
                </ol>
            </div>
        </div>
    </div>

    <tabset justified="true" class="tab-container">
        <tab heading="Node.JS">
            <div>
                <p>在正式开发之前我们要先安装好 Node.js 及了解下我们抓取所需要的相关包。</p>
                <ul>
                    <li>superagent</li>
                    <li>superagent-proxy</li>
                    <li>puppeteer</li>
                </ul>
                <hr>
                <p>我们通过 superagent 和 puppeteer 两个模块分别实现通过 Spiker代理 获取目标网站内容的示例。</p>
                <ul>
                    <li>
                        <p class="h3">superagent</p>
                        <hr>
                        <p>首先我们下载Spiker生成的CA证书到 D:\wwwroot\spider\ca 目录下， 文件名为rootCA.crt。</p>
                        <p>在 D:\wwwroot\spider\ 目录下新建index.js。放入以下代码。</p>
                        <ol class = "code">
                            <li>const path = require('path');</li>
                            <li>const fs = require('fs');</li>
                            <li>const request = require('superagent');</li>
                            <li>require('superagent-proxy')(request);</li>
                            <li>(async ()=>{</li>
                            <li>&emsp;try{</li>
                            <li>&emsp;&emsp;let ca = fs.readFileSync(path.join(__dirname, 'ca', 'rootCA.crt'));</li>
                            <li>&emsp;&emsp;let res = await request.get("https://www.baidu.com/s?wd=Spiker&ie=UTF-8").ca(ca).proxy("http://tunnel.spiker.cn");</li>
                            <li>&emsp;&emsp;let content = res.text;</li>
                            <li>&emsp;&emsp;console.log(content);</li>
                            <li>&emsp;} catch(e) {</li>
                            <li>&emsp;&emsp;console.error(e.message);</li>
                            <li>&emsp;}</li>
                            <li>})()</li>
                        </ol>
                        <p>&nbsp;</p>
                    </li>
                    <li>
                        <p class="h3">puppeteer</p>
                        <hr>
                        <p>如果使用puppeteer进行抓取，若目标网站是具备SSL加密的HTTPS网站，则需要下载Spiker生成的CA证书并安装到系统上。方法可参考
                            <label ui-sref="app.ca" class="label bg-info m-l-xs link">使用说明-CA证书</label>。</p>
                        <ol class = "code">
                            <li>const puppeteer = require('puppeteer');</li>
                            <li>(async ()=>{</li>
                            <li>&emsp;try{</li>
                            <li>&emsp;&emsp;let browser = await puppeteer.launch({</li>
                            <li>&emsp;&emsp;&emsp;args: ["--proxy-server=tunnel.spiker.cn"]</li>
                            <li>&emsp;&emsp;});</li>
                            <li>&emsp;&emsp;let page = await browser.newPage()</li>
                            <li>&emsp;&emsp;await page.goto("https://www.baidu.com/s?wd=Spiker&ie=UTF-8", {timeout:60*1000,waitUntil:"networkidle2"});</li>
                            <li>&emsp;&emsp;let content = await page.content();</li>
                            <li>&emsp;&emsp;console.log(content);</li>
                            <li>&emsp;} catch(e) {</li>
                            <li>&emsp;&emsp;console.error(e.message);</li>
                            <li>&emsp;}</li>
                            <li>})()</li>
                        </ol>
                        <p>&nbsp;</p>
                    </li>
                </ul>
                <p>正常请求完成后，参数content即为我们获取到的请求内容。</p>
            </div>
        </tab>
    </tabset>
</div>